import React, { Component } from 'react'
import { Toast } from 'antd-mobile'
import { NavBar, Item, Icon } from 'components'
import './Bank.less'

export default class Bank extends Component<any, any> {

    public bankData = [
        {
            bankName: '北京银行',
            logo: require('../../../../assets/beiJingBank.png')
        },
        {
            bankName: '成都银行',
            logo: require('../../../../assets/chenDuBank.png')
        },
        {
            bankName: '广发银行',
            logo: require('../../../../assets/guangFaBank.png')
        },
        {
            bankName: '华夏银行',
            logo: require('../../../../assets/huaXiaBank.png')
        },
        {
            bankName: '交通银行',
            logo: require('../../../../assets/jiaoTongBank.png')
        },
        {
            bankName: '浦发银行',
            logo: require('../../../../assets/puFaBank.png')
        },
        {
            bankName: '兴业银行',
            logo: require('../../../../assets/xinYeBank.png')
        },
        {
            bankName: '招商银行',
            logo: require('../../../../assets/zhaoShangBank.png')
        },
        {
            bankName: '中国工商银行',
            logo: require('../../../../assets/chinaGongShangBank.png')
        },
        {
            bankName: '中国广大银行',
            logo: require('../../../../assets/chinaGuangDaBank.png')
        },
        {
            bankName: '中国建设银行',
            logo: require('../../../../assets/chinaJianSheBank.png')
        },
        {
            bankName: '中国民生银行',
            logo: require('../../../../assets/chinaMinShengBank.png')
        },
        {
            bankName: '中国农业银行',
            logo: require('../../../../assets/chinaNonYeBank.png')
        },
        {
            bankName: '中国平安银行',
            logo: require('../../../../assets/chinaPinAnBank.png')
        },
        {
            bankName: '中国银行',
            logo: require('../../../../assets/chinaBank.png')
        },
        {
            bankName: '中国邮政银行',
            logo: require('../../../../assets/chinaYouZhenBank.png')
        },
        {
            bankName: '中信银行',
            logo: require('../../../../assets/zhongXinBank.png')
        }
    ]

    public render (): JSX.Element {
        return (
            <div className="bank">
                <NavBar title={<div style={{fontSize: '0.97rem', color: '#222'}}>选择银行</div>} fixed={true} />
                <div className="bank_searchBar">
                    <div><Icon type="search" /></div>
                    <div><input type="text" placeholder="搜索" onChange={this.handleInputChange} /></div>
                </div>
                <div className="bank_sectionTitle">
                    <div>热门银行</div>
                </div>
                {
                    this.bankData.map((item: any, index: number) => {
                        return (
                            <Item
                                key={index} 
                                onPress={() => {this.handleSelectBank(item.bankName)}}
                                className="bank_item" 
                                title={<div className="bank_item_title">
                                    <img src={item.logo} />
                                    <span>{item.bankName}</span>
                                </div>} 
                            />
                        )
                    })
                }
            </div>
        )
    }
    private handleSelectBank = (name: string) => {
        const { SET_USER_BALANCE_BANK } = this.props
        SET_USER_BALANCE_BANK(name)
        Toast.loading('', 2, () => {this.props.history.goBack()})
    }
    private handleInputChange = (e: any) => {
        // console.log(e.target.value)
    }
}